<!-- 头部 -->
<template>
  <div class="center-bottoms">
    <div class="chart" style="height: 10%">
      <table class="table1" style="height: 100%">
        <tr class="headtr">
          <th class="headtr-th" style="width: 15%">人员名称</th>
          <th class="headtr-th" style="width: 12%">年纪</th>
          <th class="headtr-th" style="width: 12%">班级</th>
          <th class="headtr-th" style="width: 21%">报警内容</th>
          <th class="headtr-th" style="width: 20%">报警时间</th>
        </tr>
      </table>
    </div>
    <div class="chart" style="height: 88%">
      <table class="table1">
        <vue-seamless-scroll :data="tableData" class="seamless-warp">
          <ul class="item">
            <li
              v-for="(item, index) in tableData"
              :key="index"
              class="flex align-center"
              style="justify-content: space-around"
            >
              <span class="oneOver" style="width: 15%">{{ item.name }}</span>
              <span class="oneOver" style="width: 12%">{{
                item.grade_name
              }}</span>
              <span style="width: 12%; text-align: center">{{
                item.class_name
              }}</span>
              <span style="width: 21%; text-align: center">{{
                item.da_type_name
              }}</span>
              <span style="width: 20%; text-align: center">{{
                item.create_time
              }}</span>
            </li>
          </ul>
        </vue-seamless-scroll>
      </table>
      <span
        v-if="!tableData.length"
        style="
          font-size: 12px;
          text-align: center;
          width: 100%;
          display: block;
          margin-top: 20px;
          color: #ffffff;
        "
        >暂无数据</span
      >
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  name: "leftTopBox",
  components: {vueSeamlessScroll},
  props:{
    schooleId:{
      type:[String, Number],
      default:0
    }
  },
  data() {
    return {
      pageflag: false,
      tableData: [],
    };
  },

  mounted() {
    this.getAttendanceData();
  },
  methods: {
    // 获取学生报警信息列表
    async getAttendanceData(){
      let params = {
        schoole_id:this.schooleId,
        page:1,
        page_size:100,
      }
      let { data } = await this.$http.get('/data_center/getStudentResortList',{params})
      try{
        if ( data.code === 0 ) {
          this.tableData=data.data.list
        }
      } catch {
        console.log('error')
      }
    }
    
  },
  beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
.center-bottoms {
  height: 100%;
  flex: 3;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0px 10px;
  .chart::-webkit-scrollbar {
    display: none;
  }
  .chart {
    width: 100%;
    overflow-y: scroll;
    .table1 {
      width: 100%;
      font-size: 14px;
      table-layout: fixed;
      border-collapse: separate;
      border-spacing: 0px 0px;
      .seamless-warp {
        height: 100%;
        overflow: hidden;
        .item {
          padding: 0px 10px;
        }
      }
      .headtr {
        border-bottom: 1px solid rgba(0, 143, 253, 1);
        border-top: 1px solid rgba(0, 143, 253, 1);
        line-height: 14px;
        background-color: rgb(0, 100, 222);
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        // color: #71cdf9;
      }
      li {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        height: 36px;
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
        text-align: center;
        span{
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      li:nth-child(2n) {
        height: 36px;
        // background-color: rgba(113, 205, 249, 0.1);
        background-color: rgb(6, 62, 132);
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
      }

      th {
        height: 17px;
        font-size: 14px;
        font-weight: 500;
        color: #fff;
        line-height: 17px;
      }
      td {
        text-align: center;
        color: white;
      }
      .rank1 {
        color: #66c852;
      }
      .rank1 {
        color: #66c852;
      }
      .rank2 {
        color: #fdb628;
      }
      .rank3 {
        color: #ed504c;
      }
    }
  }
}

// .headtr-th {
//   text-align: center;
//   font-size: 16px;
//   font-family: Source Han Sans CN;
//   font-weight: 400;
//   color: #fff;
//   line-height: 18px;
// }
</style>

